<template>
<van-nav-bar
    left-arrow
    @click-left="gotoleft"
    title="注册"
  />
<div class="register-container">
  <van-cell-group>
    <van-field label="账号" v-model="account" placeholder="请输入账号（必填）" />
    <van-field label="密码" v-model="password" placeholder="请输入密码（必填）" type="password"/>
    <van-field label="确认密码" v-model="confirm_password" placeholder="请输入确认密码（必填）" type="password" />
    <van-field label="姓名" v-model="name" placeholder="请输入姓名（必填）" />
    <van-field label="性别" v-model="gender" placeholder="性别（必选）" readonly @click-input="sexshow = true" />
    <van-field label="手机" v-model="phone" placeholder="请输入手机（必填）" type="number">
      <van-button size="small" type="primary" color="#fff" disabled custom-style="color:#c8c9cc;">
      +86
    </van-button>
    </van-field>
    <van-field label="类别" v-model="typeText" placeholder="普通会员/经销商（必选）" readonly @click-input="typeshow = true" />
  </van-cell-group>
  <div class="register-btn" @click="goregister">注册</div>
  <van-action-sheet v-model:show="sexshow" :actions="sexactions" @select="selectGender" />
  <van-action-sheet v-model:show="typeshow" :actions="typeactions" @select="selectType" />
</div>
</template>

<script>
import router from '../router'
import { Toast } from 'vant';
import {
  Register
} from '@/api'
import {reactive,toRefs,$router} from 'vue'
export default {
  name: 'register',
  setup(props) {
    //参数
    let register = reactive({
      account: '',
      password: '',
      confirm_password: '',
      name: '',
      phone: '',
      gender:'',
      genderType:'',
      type: '', //类别(1:普通会员 2:经销商)
      typeText: '',
      sexshow:false,
      sexactions:[
        { name: '女' },
        { name: '男' }
      ],
      typeshow:false,
      typeactions:[
        { name: '普通会员' },
        { name: '经销商' }
      ]
    })
    function selectGender(item,index) {
      register.gender = item.name;
      register.sexshow = false;
      register.genderType = index;
    }
    function selectType(item,index) {
      register.typeText = item.name;
      register.typeshow = false;
      register.type = index+1;
    }
    function validate() {
      const phoneReg = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/
      const tips = {
        account: '请输入账号',
        password: '请输入密码',
        confirm_password: '确认密码和密码不一致',
        name: '请输入姓名',
        gender:'请选择性别',
        phone: '请输入手机号',
        type: '请选择类别'
      }
      for (const key in tips) {
        if (register[key] === '') {
          Toast(tips[key])
          return false;
        }
      }
      if (!phoneReg.test(register.phone)) {
        Toast('手机号码格式不正确')
        return false;
      }
      return true;
    }
    function goregister() {
      if (!validate()) return;
      let test = {
        username:register.account,
        password:register.password,
        realName:register.name,
        gender:register.genderType,
        mobile:register.phone,
        category:register.type,
      }
      console.log('test==>',test)
      Register(test).then(res=>{
        Toast.success('注册成功')
        console.log('register==>',res)
      })
    }
    //挂载
    function gotoleft(){
      router.go(-1)
    }
    //挂载
    return{ ...toRefs(register),selectGender,selectType,goregister,gotoleft}
  }
}
</script>

<style scoped>
.register-container{
  width:100%;
  height:100%;
}

.register-container{
  padding-top: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

van-cell-group{
  width:85%;
}

.register-btn{
  width:85%;
  height: 80px;
  line-height: 80px;
  letter-spacing: 10px;
  margin-top: 80px;
  border-radius: 5px;
  color:#ffffff;
  background-color: #31b573;
  text-align: center;
}
</style>